<template>
  <div class="date">
    <!-- 年份 月份 -->
    <div
      class="month"
      v-if="!datePickerVisible"
    >
      <span @click="datePickerVisible=true">{{ currentYear }}年{{ currentMonth }}月</span>---第{{currentWeekends}}周
    </div>
    <div class="block">
      <el-date-picker
        v-if="datePickerVisible"
        v-model="value1"
        type="date"
        placeholder="选择日期"
        @change="changeDate"
      >
      </el-date-picker>
    </div>
    <el-button @click="weekPre">上一周</el-button>
    <el-button @click="weekNext">下一周</el-button>
    <el-button @click="setToday">回到今天</el-button>
    <!-- 星期 -->
    <ul class="weekdays">
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li>六</li>
      <li>日</li>
    </ul>
    <!-- 日期 -->
    <ul class="days">
      <li
        @click="pick(day)"
        v-for="(day, index) in days"
        :key="index"
      >
        <!--本月-->
        <span
          v-if="day.getMonth()+1 != currentMonth"
          class="other-month"
        >{{ day.getDate() }}</span>
        <span v-else>
          <!--今天-->
          <span
            v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"
            class="active"
          >今天</span>
          <span v-else>{{ day.getDate() }}</span>
        </span>
      </li>
    </ul>
  </div>
</template>
  
<script>
export default {
  name: 'date',
  data() {
    return {
      currentYear: 1970,   // 年份
      currentMonth: 1,  // 月份
      currentDay: 1,    // 日期
      currentWeek: 1,    // 星期
      days: [],
      value1: '',
      currentWeekends: '',// 第几周
      datePickerVisible: false
    }
  },

  mounted() {

  },

  created() {
    this.initData(null)
  },

  methods: {
    formatDate(year, month, day) {
      const y = year
      let m = month
      if (m < 10) m = `0${m}`
      let d = day
      if (d < 10) d = `0${d}`
      return `${y}-${m}-${d}`
    },

    initData(cur) {
      let date = ''
      if (cur) {
        date = new Date(cur)
      } else {
        date = new Date()
      }
      console.log('dayyyyy', date);
      this.currentDay = date.getDate()          // 今日日期 几号
      this.currentYear = date.getFullYear()       // 当前年份
      this.currentMonth = date.getMonth() + 1    // 当前月份
      this.currentWeek = date.getDay() // 1...6,0   // 星期几
      if (this.currentWeek === 0) {
        this.currentWeek = 7
      }
      const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)// 今日日期 年-月-日
      this.days.length = 0
      // 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
      /* eslint-disabled */
      for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
        const d = new Date(str)
        d.setDate(d.getDate() - i)
        // console.log(y:" + d.getDate())
        this.days.push(d)
      }
      for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
        const d = new Date(str)
        d.setDate(d.getDate() + i)
        this.days.push(d)
      }
      this.setCurrentWeekends(this.days[0])
    },
    // 计算周
    setCurrentWeekends(date) {
      console.log('周', date);
      const firstDayOfYear = new Date(date.getFullYear(), 0, 1)
      const pastDaysOfYear = (date - firstDayOfYear) / 86400000
      this.currentWeekends = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7)
    },
    //  上个星期
    weekPre() {
      const d = this.days[0]    // 如果当期日期是7号或者小于7号
      d.setDate(d.getDate() - 7)
      this.initData(d, 'pre')
    },

    //  下个星期
    weekNext() {
      const d = this.days[6]    // 如果当期日期是7号或者小于7号
      d.setDate(d.getDate() + 7)
      this.initData(d, 'next')
    },
    setToday() {

      this.initData(new Date())
    },
    // 上一個月   传入当前年份和月份
    // pickPre(year, month) {
    //   const d = new Date(this.formatDate(year, month, 1))
    //   d.setDate(0)
    //   this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
    // },


    // // 下一個月   传入当前年份和月份
    // pickNext(year, month) {
    //   const d = new Date(this.formatDate(year, month, 1))
    //   d.setDate(35)
    //   this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
    // },

    // 当前选择日期
    pick(date) {
      // 获取的当前日期
      this.value1 = date
      // alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))
    },
    // 日期选择器选择日期
    changeDate() {
      this.initData(this.value1)
      this.datePickerVisible = false
    }
  },
}
</script>
<style lang="scss">
.date {
  height: px2rem(180);
  color: #333;

  .month {
    font-size: px2rem(24);
    text-align: center;
    margin-top: px2rem(20);
  }

  .weekdays {
    display: flex;
    font-size: px2rem(28);
    margin-top: px2rem(20);

    li {
      flex: 1;
      text-align: center;
    }
  }

  .days {
    display: flex;

    li {
      flex: 1;
      font-size: px2rem(30);
      text-align: center;
      margin-top: px2rem(10);
      line-height: px2rem(60);

      .active {
        display: inline-block;
        width: px2rem(60);
        height: px2rem(60);
        color: #fff;
        border-radius: 50%;
        background-color: #fa6854;
      }

      .other-month {
        color: #e4393c;
      }
    }
  }
}
</style>